昨天有學習如何做左右點擊切換按鈕，預計要增加在切換的過程中帶有翻頁的效果，有點像是電子書的概念，應該會利用到之前在Day05有提到過transform: rotate()；之x、y、z軸方向的旋轉，今天主要是先學習如何做出翻卡的樣子，那麼就開始來找資料學習這個效果吧~

筆記區

一、原理

我們先來了解一下翻卡的效果是如何運作，既然是翻卡效果，想必就是有分成正反兩面，所以要先設定兩個卡片：

那他要如何翻到背面呢?還記得之前講過的空間概念，這裡運用到Y軸的旋轉方向，當然如果要X軸的旋轉方向也是可以，先設定一個以一張卡片大小為長寬的外框，將外框加上transform: rotateY(180deg);的hover效果，再將正面圖設定transform: rotateY(0deg);以確保格式沒跑版：
※正面設定的角度為transform: rotateY(0deg)，觸碰後是轉180deg；反面則是transform: rotateY(-180deg)，觸碰後是轉0deg。形成一個循環的旋轉方向，避免產生碰撞衝突。

這時還沒有附加翻卡的效果，只有瞬間切換正反面，所以加上transition，讓他有翻頁的感覺：

二、transform: rotateY()設定

.front{
    transform: rotateY(0deg);
}
.back{
    transform: rotateY(-180deg);
}
.card:hover .front{
    transform: rotateY(180deg);
}
.card:hover .back{
    transform: rotateY(0deg);
}

三、完整程式碼

codepen點這
老樣子，文字描述可能理解的不夠透徹，這邊附上完整的程式碼，強烈建議大家到參考資料的網址看看，裡面內容都講解得非常詳細。

參考資料

#HTML #CSS 製作翻牌效果